<template>
  <div style="width: 100%; height: 100%">
    <div ref="earthContainer" style="width: 100%; height: 100%"></div>
    <div style="position: absolute; left: 18px; top: 18px">
      <button>{{ message }}</button>
      <button @click="play()"> play </button>
      <button @click="cameraAttached1()"> play11 </button>
      
    </div>
  </div>
</template>

<script>

import ll from './mmm.js'
import s from "./s.json";

// import "./PolylineTrail"

function createEarth(comp) {
  // 1.1.1 创建地球
  var earth = new XE.Earth(comp.$refs.earthContainer);
  comp._earth = earth;
  // 仅为调试方便用
  window.earth = earth;
}

function createCesium(comp) {
  window.viewer = new Cesium.Viewer(comp.$refs.earthContainer);
}

// 1 创建Earth的vue组件
var EarthComp = {
  mixins: [ll],
  methods: {
    play(){
      this.playing = !this.playing
      this._earth.sceneTree.$refs.path11.czmObject.show = false
    },
    cameraAttached1(){
      this.cameraAttached = !this.cameraAttached
    },
    loadData() {
      let _this = this;
      this._earth.xbsjFromJSON(s);
      this.viewer = _this._earth.czm.viewer;
      let viewer = _this._earth.czm.viewer;
      this.viewer.scene.debugShowFramesPerSecond = true;
      this.linglong();
    },
  },
  data() {
    return {
      message: "页面加载于 " + new Date().toLocaleString(),
      _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
      _bgImagery: undefined,
      playing: false,
      cameraAttached: false,
    };
  },
  // 1.1 资源创建
  mounted() {
    if (typeof XE !== "undefined") {
      createEarth(this);
      this.loadData();
    } else if (typeof Cesium !== "undefined") {
      createCesium(this);
    }
  },
  // 1.2 资源销毁
  beforeDestroy() {
    // vue程序销毁时，需要清理相关资源
    this._earth = this._earth && this._earth.destroy();
  },
};

export default EarthComp;
</script>